<template>
  <div class="w-full h-full mt-[70px] no-scrollbar">
    <div class="w-full mb-[16px] direction-column">
      <div class="w-full flex justify-center relative">
        <el-image
          class="w-[100%] md:h-[658px]"
          :src="bgImgPath?.bgImg27"
          lazy
        />
        <div
          class="w-full absolute top-1/2 left-1/2 md:left-1/3 transform -translate-x-1/2 -translate-y-1/2 flex items-center justify-center p-4"
        >
          <div class="text-blue-600 text-center">
            <div class="text-3xl md:text-[85px] mb-4 font-bold text-[#ff6839]">
              {{ commonConfig?.joinUs }}
            </div>
          </div>
        </div>
      </div>
      <div class="w-full flex justify-center relative">
        <el-form
          ref="ruleFormRef"
          class="w-full container p-4"
          :rules="rules"
          :model="fromData"
          label-position="top"
          label-width="auto"
        >
          <el-row :gutter="20">
            <el-col :xs="24" :md="12">
              <el-form-item
                :label="homeConfig?.name"
                label-position="top"
                prop="username"
              >
                <el-input
                  v-model="fromData.username"
                  style="width: 100%"
                  :placeholder="`${commonConfig?.placeholderInput}${homeConfig?.name}`"
                />
              </el-form-item>
            </el-col>
            <el-col :xs="24" :md="12">
              <el-form-item
                :label="homeConfig?.phone"
                label-position="top"
                prop="telephone"
              >
                <el-input
                  v-model="fromData.telephone"
                  style="width: 100%"
                  :placeholder="`${commonConfig?.placeholderInput}${homeConfig?.phone}`"
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :xs="24" :md="12">
              <el-form-item
                :label="homeConfig?.certificateTypeTitle"
                label-position="top"
                prop="idType"
              >
                <el-select
                  v-model="fromData.idType"
                  value-key="value"
                  :placeholder="`${commonConfig?.placeholderSelect}${homeConfig?.certificateTypeTitle}`"
                  style="width: 100%"
                >
                  <el-option
                    v-for="item in homeConfig?.certificateType"
                    :key="item.value"
                    :label="item.name"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :md="12">
              <el-form-item
                v-if="fromData.idType == '3'"
                label=""
                label-position="top"
                prop="idTypeOther"
              >
                <el-input
                  v-model="fromData.idTypeOther"
                  class="mt-[30px]"
                  style="width: 100%"
                  :placeholder="`${commonConfig?.placeholderInput}${homeConfig?.certificateTypeTitle}`"
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :xs="24" :md="12">
              <el-form-item
                :label="homeConfig?.sexTitle"
                label-position="top"
                prop="gender"
              >
                <el-select
                  v-model="fromData.gender"
                  :placeholder="`${commonConfig?.placeholderSelect}${homeConfig?.sexTitle}`"
                  style="width: 100%"
                >
                  <el-option
                    v-for="item in homeConfig?.sex"
                    :key="item.value"
                    :label="item.name"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :md="12">
              <el-form-item
                :label="homeConfig?.ageTitle"
                label-position="top"
                prop="age"
              >
                <el-input-number
                  v-model="fromData.age"
                  style="width: 100%"
                  :precision="0"
                  :step="1"
                  :max="70"
                  :min="18"
                  :placeholder="`${commonConfig?.placeholderInput}${homeConfig?.ageTitle}`"
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :xs="24" :md="12">
              <el-form-item
                :label="homeConfig?.regionTitle"
                label-position="top"
                prop="address"
              >
                <el-select
                  v-model="fromData.address"
                  :placeholder="`${commonConfig?.placeholderSelect}${homeConfig?.regionTitle}`"
                  style="width: 100%"
                  @change="changeAddress"
                >
                  <el-option
                    v-for="item in homeConfig?.region"
                    :key="item.value"
                    :label="item.name"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :md="12">
              <el-form-item
                :label="homeConfig?.locationTitle"
                label-position="top"
                prop="addressInfo"
              >
                <el-select
                  :placeholder="`${commonConfig?.placeholderSelect}`"
                  style="width: 100%"
                  v-model="fromData.addressInfo"
                >
                  <el-option
                    v-for="item in infoddress"
                    :key="item.value"
                    :label="item.name"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :xs="24" :md="12">
              <el-form-item
                :label="homeConfig?.workTypeTitle"
                label-position="top"
                prop="jobTypeList"
              >
                <el-select
                  v-model="fromData.jobTypeList"
                  collapse-tags
                  multiple
                  :placeholder="`${commonConfig?.placeholderSelect}${homeConfig?.workTypeTitle}`"
                  style="width: 100%"
                >
                  <el-option
                    v-for="item in homeConfig?.workType"
                    :key="item.value"
                    :label="item.name"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
              <el-form-item
                class="mt-[-16px]"
                v-if="fromData.jobTypeList?.includes('6')"
                label-position="top"
                prop="jobTypeOther"
              >
                <el-input
                  v-model="fromData.jobTypeOther"
                  class="mt-[16px]"
                  style="width: 100%"
                  :placeholder="`${commonConfig?.placeholderInput}`"
                />
              </el-form-item>
            </el-col>
            <el-col :xs="24" :md="12">
              <el-form-item
                :label="homeConfig?.professionalLicenseTitle"
                label-position="top"
                prop="licenseList"
              >
                <el-select
                  v-model="fromData.licenseList"
                  collapse-tags
                  multiple
                  value-key="value"
                  :placeholder="`${commonConfig?.placeholderSelect}${homeConfig?.professionalLicenseTitle}`"
                  style="width: 100%"
                >
                  <el-option
                    v-for="item in homeConfig?.professionalLicense"
                    :key="item.value"
                    :label="item.name"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
              <el-form-item
                v-if="fromData.licenseList?.includes('4')"
                class="mt-[-16px]"
                label-position="top"
                prop="licenseOther"
              >
                <el-input
                  v-model="fromData.licenseOther"
                  class="mt-[16px]"
                  style="width: 100%"
                  :placeholder="`${commonConfig?.placeholderInput}`"
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :xs="24" :md="12">
              <el-form-item
                :label="homeConfig?.workDayTitle"
                label-position="top"
                prop="jobDayList"
              >
                <el-select
                  v-model="fromData.jobDayList"
                  collapse-tags
                  multiple
                  :placeholder="`${commonConfig?.placeholderSelect}${homeConfig?.workDayTitle}`"
                  style="width: 100%"
                >
                  <el-option
                    v-for="item in homeConfig?.workDay"
                    :key="item.value"
                    :label="item.name"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :md="12">
              <el-form-item
                :label="homeConfig?.workTimeTitle"
                label-position="top"
                prop="jobTimeList"
              >
                <el-select
                  v-model="fromData.jobTimeList"
                  collapse-tags
                  multiple
                  :placeholder="`${commonConfig?.placeholderSelect}${homeConfig?.workTimeTitle}`"
                  style="width: 100%"
                >
                  <el-option
                    v-for="item in homeConfig?.workTime"
                    :key="item.value"
                    :label="item.name"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
              <el-form-item
                v-if="fromData.jobTimeList?.includes('4')"
                class="mt-[-16px]"
                label-position="top"
                prop="jobTimeOther"
              >
                <el-input
                  v-model="fromData.jobTimeOther"
                  :placeholder="`${commonConfig?.placeholderInput}`"
                  class="mt-[16px]"
                  style="width: 100%"
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :xs="24" :md="12">
              <el-form-item
                :label="homeConfig?.workAreaTitle"
                label-position="top"
                prop="jobAddressList"
              >
                <el-select
                  v-model="fromData.jobAddressList"
                  collapse-tags
                  multiple
                  :placeholder="`${commonConfig?.placeholderSelect}${homeConfig?.workAreaTitle}`"
                  style="width: 100%"
                  @change="changeJobAddressList"
                >
                  <el-option
                    v-for="item in homeConfig?.region"
                    :key="item.value"
                    :label="item.name"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :md="12">
              <el-form-item
                :label="homeConfig?.locationTitle"
                label-position="top"
                prop="jobAddressInfoList"
              >
                <el-select
                  v-model="fromData.jobAddressInfoList"
                  collapse-tags
                  multiple
                  :placeholder="`${commonConfig?.placeholderSelect}${homeConfig?.locationTitle}`"
                  style="width: 100%"
                >
                  <el-option-group
                    v-for="group in jobAddressInfoOpions"
                    :key="group.name"
                    :label="group.name"
                  >
                    <el-option
                      v-for="item in group.options"
                      :key="item.name"
                      :label="item.name"
                      :value="item.name"
                    />
                  </el-option-group>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20" class="mb-[16px]">
            <el-col :xs="24" :md="12"> </el-col>
            <el-col :xs="24" :md="12">
              <el-button
                @click="submitForm"
                style="width: 100%"
                type="primary"
                >{{ homeConfig?.submit }}</el-button
              >
            </el-col>
          </el-row>
        </el-form>
      </div>
    </div>
    <ContactUs></ContactUs>
  </div>
</template>

<script setup lang="ts">
import { computed, watch, ref } from "vue";
import { useConfig } from "@/composables/useConfig";
import ContactUs from "./ContactUs.vue";
import bgImgPath from "./bgImgPath/index";
import { postJoinus } from "@/api/Join";
import { ElMessage } from "element-plus";
import { useI18n } from "vue-i18n";

const { locale } = useI18n();
const currentLanguage = computed(() => locale.value);

const { getHomeConfig, getCommonConfig, loading } = useConfig();

const homeConfig = computed(() => getHomeConfig());
const commonConfig = computed(() => getCommonConfig());
// 监听语言变化
watch(
  () => currentLanguage.value,
  () => {
    fromData.value.username = undefined;
    fromData.value.telephone = undefined;
    fromData.value.idType = undefined;
    fromData.value.idTypeOther = undefined;
    fromData.value.gender = undefined;
    fromData.value.age = undefined;
    fromData.value.addressInfo = undefined;
    fromData.value.address = undefined;
    fromData.value.jobTypeList = undefined;
    fromData.value.jobTypeOther = undefined;
    fromData.value.licenseList = undefined;
    fromData.value.licenseOther = undefined;
    fromData.value.jobDayList = undefined;
    fromData.value.jobTimeList = undefined;
    fromData.value.jobTimeOther = undefined;
    fromData.value.jobAddressList = undefined;
    fromData.value.jobAddressInfoList = undefined;
    ruleFormRef.value.resetFields();
  }
);
const fromData = ref({
  appkey: "e057f20f883e",
  username: undefined,
  telephone: undefined, // 手机
  idType: undefined, // 证件类型
  idTypeOther: undefined, // 证件类型 - 其他描述
  gender: undefined,
  age: undefined,
  addressInfo: undefined,
  address: undefined,
  jobTypeList: undefined,
  jobTypeOther: undefined,
  licenseList: undefined,
  licenseOther: undefined,
  jobDayList: undefined,
  jobTimeList: undefined,
  jobTimeOther: undefined,
  jobAddressList: undefined,
  jobAddressInfoList: undefined,
});
const validateUsername = (rule: any, value: any, callback: any) => {
  if (!value) {
    callback(
      new Error(
        `${commonConfig.value?.placeholderInput}${homeConfig.value?.name}`
      )
    );
  }
  {
    callback();
  }
};
const validatetelephone = (rule: any, value: any, callback: any) => {
  if (!value) {
    callback(
      new Error(
        `${commonConfig.value?.placeholderInput}${homeConfig.value?.phone}`
      )
    );
  }
  {
    callback();
  }
};
const validateidType = (rule: any, value: any, callback: any) => {
  if (!value) {
    callback(
      new Error(
        `${commonConfig.value?.placeholderSelect}${homeConfig.value?.certificateTypeTitle}`
      )
    );
  }
  {
    callback();
  }
};

const validateidTypeOther = (rule: any, value: any, callback: any) => {
  if (!value) {
    callback(
      new Error(
        `${commonConfig.value?.placeholderInput}${homeConfig.value?.certificateTypeTitle}`
      )
    );
  }
  {
    callback();
  }
};
const validategender = (rule: any, value: any, callback: any) => {
  if (!value) {
    callback(
      new Error(
        `${commonConfig.value?.placeholderInput}${homeConfig.value?.sexTitle}`
      )
    );
  }
  {
    callback();
  }
};
const validateage = (rule: any, value: any, callback: any) => {
  if (!value) {
    callback(
      new Error(
        `${commonConfig.value?.placeholderSelect}${homeConfig.value?.sexTitle}`
      )
    );
  }
  {
    callback();
  }
};
const validateaddressInfo = (rule: any, value: any, callback: any) => {
  if (!value) {
    callback(
      new Error(
        `${commonConfig.value?.placeholderSelect}${homeConfig.value?.regionTitle}`
      )
    );
  }
  {
    callback();
  }
};
const validateaddress = (rule: any, value: any, callback: any) => {
  if (!value) {
    callback(new Error(`${commonConfig.value?.placeholderSelect}`));
  }
  {
    callback();
  }
};
const validatejobTypeList = (rule: any, value: any, callback: any) => {
  if (!value) {
    callback(
      new Error(
        `${commonConfig.value?.placeholderSelect}${homeConfig.value?.workTypeTitle}`
      )
    );
  }
  {
    callback();
  }
};
const validatejobTypeOther = (rule: any, value: any, callback: any) => {
  if (!value) {
    callback(new Error(`${commonConfig.value?.placeholderInput}`));
  }
  {
    callback();
  }
};
const validatelicenseList = (rule: any, value: any, callback: any) => {
  if (!value) {
    callback(
      new Error(
        `${commonConfig.value?.placeholderSelect}${homeConfig.value?.professionalLicenseTitle}`
      )
    );
  }
  {
    callback();
  }
};
const validatelicenseOther = (rule: any, value: any, callback: any) => {
  if (!value) {
    callback(new Error(`${commonConfig.value?.placeholderInput}`));
  }
  {
    callback();
  }
};

const validatejobDayList = (rule: any, value: any, callback: any) => {
  if (!value) {
    callback(
      new Error(
        `${commonConfig.value?.placeholderSelect}${homeConfig.value?.workDayTitle}`
      )
    );
  }
  {
    callback();
  }
};

const validatejobTimeList = (rule: any, value: any, callback: any) => {
  if (!value) {
    callback(
      new Error(
        `${commonConfig.value?.placeholderSelect}${homeConfig.value?.workDayTitle}`
      )
    );
  }
  {
    callback();
  }
};

const validatejobTimeOther = (rule: any, value: any, callback: any) => {
  if (!value) {
    callback(new Error(`${commonConfig.value?.placeholderInput}`));
  }
  {
    callback();
  }
};
const validatejobAddressList = (rule: any, value: any, callback: any) => {
  if (!value) {
    callback(
      new Error(
        `${commonConfig.value?.placeholderSelect}${homeConfig.value?.workAreaTitle}`
      )
    );
  }
  {
    callback();
  }
};

const validatejobAddressInfoList = (rule: any, value: any, callback: any) => {
  if (!value) {
    callback(new Error(`${commonConfig.value?.placeholderSelect}`));
  }
  {
    callback();
  }
};
const rules = ref({
  username: [
    {
      required: true,
      validator: validateUsername,
      trigger: "blur",
    },
  ],
  telephone: [
    {
      required: true,
      validator: validatetelephone,
      trigger: "blur",
    },
  ],
  idType: [
    {
      required: true,
      validator: validateidType,
      trigger: "blur",
    },
  ],
  idTypeOther: [
    {
      required: true,
      validator: validateidTypeOther,
      trigger: "blur",
    },
  ],
  gender: [
    {
      required: true,
      validator: validategender,
      trigger: "blur",
    },
  ],
  age: [
    {
      required: true,
      validator: validateage,
      trigger: "blur",
    },
  ],
  addressInfo: [
    {
      required: true,
      validator: validateaddressInfo,
      trigger: "blur",
    },
  ],
  address: [
    {
      required: true,
      validator: validateaddress,
      trigger: "blur",
    },
  ],
  jobTypeList: [
    {
      required: true,
      validator: validatejobTypeList,
      trigger: "blur",
    },
  ],
  jobTypeOther: [
    {
      required: true,
      validator: validatejobTypeOther,
      trigger: "blur",
    },
  ],
  licenseList: [
    {
      required: true,
      validator: validatelicenseList,
      trigger: "blur",
    },
  ],
  licenseOther: [
    {
      required: true,
      validator: validatelicenseOther,
      trigger: "blur",
    },
  ],
  jobDayList: [
    {
      required: true,
      validator: validatejobDayList,
      trigger: "blur",
    },
  ],
  jobTimeList: [
    {
      required: true,
      validator: validatejobTimeList,
      trigger: "blur",
    },
  ],
  jobTimeOther: [
    {
      required: true,
      validator: validatejobTimeOther,
      trigger: "blur",
    },
  ],
  jobAddressList: [
    {
      required: true,
      validator: validatejobAddressList,
      trigger: "blur",
    },
  ],
  jobAddressInfoList: [
    {
      required: true,
      validator: validatejobAddressInfoList,
      trigger: "blur",
    },
  ],
});
const ruleFormRef = ref<any>();
const infoddress = ref<any>([]);
const changeAddress = (val: any) => {
  // 处理表单提交逻辑 - 获取地址信息
  if (val == "1") {
    infoddress.value = homeConfig.value?.hkRegion;
  } else if (val == "2") {
    infoddress.value = homeConfig.value?.klRegion;
  } else if (val == "3") {
    infoddress.value = homeConfig.value?.newRegion;
  }
  fromData.value.addressInfo = undefined;
};
const jobAddressInfoOpions = ref([]);
// 获取地址信息
const changeJobAddressList = (val: any) => {
  // 处理表单提交逻辑 - 获取工作地址信息
  const list = [];
  if (val.includes("1")) {
    list.push({
      name: homeConfig.value?.hkRegionTitle,
      value: "1",
      options: homeConfig.value?.hkRegion,
    });
  }
  if (val.includes("2")) {
    list.push({
      name: homeConfig.value?.klRegionTitle,
      value: "2",
      options: homeConfig.value?.klRegion,
    });
  }
  if (val.includes("3")) {
    list.push({
      name: homeConfig.value?.newRegionTitle,
      value: "3",
      options: homeConfig.value?.newRegion,
    });
  }
  jobAddressInfoOpions.value = list;
  // 所选之清空掉
  fromData.value.jobAddressInfoList = [];
};

const submitForm = async () => {
  await ruleFormRef.value.validate((valid, fields) => {
    if (valid) {
      // 处理表单提交逻辑 - 提交表单数据
      console.log("表单提交数据:", fromData.value);
      // 證件持有類別名称
      let idType = homeConfig.value.certificateType.find(
        (item: any) => item.value == fromData.value.idType
      )?.name;
      const gender = homeConfig.value.sex.find(
        (item: any) => item.value == fromData.value.gender
      )?.name;
      //居住地區
      const address = homeConfig.value.region.find(
        (item: any) => item.value == fromData.value.address
      )?.name;
      const addressInfo = infoddress.value.find(
        (item: any) => item.value == fromData.value.addressInfo
      )?.name;
      // 有興趣的工種 homeConfig?.workType
      const jobTypeList = fromData.value?.jobTypeList?.map((item: any) => {
        if (item == "6") {
          return {
            jobType: fromData.value.jobTypeOther,
          };
        }
        const name = homeConfig.value.workType.find(
          (item2: any) => item2.value == item
        )?.name;
        return {
          jobType: name,
        };
      });
      // 持有專業牌照
      const licenseList = fromData.value?.licenseList?.map((item: any) => {
        if (item == "4") {
          return {
            license: fromData.value.licenseOther,
          };
        }
        const name = homeConfig.value.professionalLicense.find(
          (item2: any) => item2.value == item
        )?.name;
        return {
          license: name,
        };
      });
      // 可工作日數
      const jobDayList = fromData.value?.jobDayList?.map((item: any) => {
        const name = homeConfig.value.workDay.find(
          (item2: any) => item2.value == item
        )?.name;
        return {
          jobDay: name,
        };
      });
      // 可工作時間
      const jobTimeList = fromData.value?.jobTimeList?.map((item: any) => {
        if (item == "4") {
          return {
            jobTime: fromData.value.jobTimeOther,
          };
        }
        const name = homeConfig.value.workTime.find(
          (item2: any) => item2.value == item
        )?.name;
        return {
          jobTime: name,
        };
      });
      // 有意工作地區 jobAddressInfoOpions
      const jobAddressInfoList = fromData.value?.jobAddressInfoList?.map(
        (item: any) => {
          // homeConfig.value.hkRegion / homeConfig.value.klRegion / homeConfig.value.newRegion 是哪一个数据集的
          const ishkRegion = homeConfig.value.hkRegion.find(
            (item2: any) => item2.name == item
          );
          if (ishkRegion) {
            return {
              jobAddress: homeConfig.value.hkRegionTitle + item,
            };
          }
          const isklRegion = homeConfig.value.klRegion.find(
            (item2: any) => item2.name == item
          );
          if (isklRegion) {
            return {
              jobAddress: homeConfig.value.klRegionTitle + item,
            };
          }
          const isnewRegion = homeConfig.value.newRegion.find(
            (item2: any) => item2.name == item
          );
          if (isnewRegion) {
            return {
              jobAddress: homeConfig.value.newRegionTitle + item,
            };
          }
        }
      );
      const params = {
        appkey: "e057f20f883e",
        language: commonConfig.value.language,
        username: fromData.value.username,
        telephone: fromData.value.telephone, // 手机
        idType:
          fromData.value.idType == "3" ? fromData.value.idTypeOther : idType, // 证件类型
        gender: gender,
        age: fromData.value.age,
        address: address + addressInfo,
        jobTypeList: jobTypeList,
        licenseList: licenseList,
        jobDayList: jobDayList,
        jobTimeList: jobTimeList,
        jobAddressList: jobAddressInfoList,
      };
      console.log("表单提交数据------params", params);
      postJoinus({
        ...params,
        language: commonConfig.value.language,
      }).then((res: any) => {
        console.log(res);
        if (res.status === 100) {
          //请求成功 - 清空数据
          fromData.value.username = undefined;
          fromData.value.telephone = undefined;
          fromData.value.idType = undefined;
          fromData.value.idTypeOther = undefined;
          fromData.value.gender = undefined;
          fromData.value.age = undefined;
          fromData.value.addressInfo = undefined;
          fromData.value.address = undefined;
          fromData.value.jobTypeList = undefined;
          fromData.value.jobTypeOther = undefined;
          fromData.value.licenseList = undefined;
          fromData.value.licenseOther = undefined;
          fromData.value.jobDayList = undefined;
          fromData.value.jobTimeList = undefined;
          fromData.value.jobTimeOther = undefined;
          fromData.value.jobAddressList = undefined;
          fromData.value.jobAddressInfoList = undefined;
          ruleFormRef.value.resetFields();
          ElMessage.success(res.message);
        } else {
          ElMessage.error(res.message);
        }
      });
    } else {
      console.log("error submit!", fields);
    }
  });
};
</script>

<style scoped>
/* 隐藏所有方向的滚动条 */
.no-scrollbar {
  /* width: 100vw;
  height: calc(100vh); */
  overflow-y: auto;
  -ms-overflow-style: none;
  /* IE/Edge */
  scrollbar-width: none;
  /* Firefox */
}

.no-scrollbar::-webkit-scrollbar {
  display: none;
  /* Chrome, Safari, Edge */
}

/* 自定义样式 */
.direction-column {
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

:deep(.el-form-item__label) {
  font-size: 15px !important;
  font-family: Microsoft JhengHei, 微軟正黑體, 微軟雅黑體;
  /* font-weight: 600; */
}
</style>
